Rodrigo

Hi, Yeah, iOS is a real thorn on the side, there are many issues that remain unresolved and normalizeScroll is the best we can do in order to get around those. There are countless hours in it, in order to help our users the best we can. I fiddled with your demo for a bit and the best thing I can offer is to disable ScrollSmoother in touch devices, especially iOS devices. The idea is that those devices already have momentum scrolling so ScrollSmoother is not really needed, right?. You can combine some reliable user agent detection with ScrollTrigger's isTouch property in order to conditionally create the ScrollSmoother instance: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Here is a fork of your demo: https://codepen.io/GreenSock/pen/JjqRErG Debug view, for checking on devices: https://cdpn.io/pen/debug/JjqRErG Finally I saw that you were animating the scrollTop property of the smoother instance, any particular reason for that? In my demo I'm using the ScrollTo Plugin (which you actually have in your setup) on the window object and seems to be working fine. Sorry I can't be of more assistance 😞 Hopefully this helps. Happy Tweening!

Hi @m__shum, It seems that your setup is quite different than the one from the OP. On top of that without a minimal demo there is not a lot we can do to help. Maybe you could borrow some logic from these demos in order to achieve what you're aiming for (I recommend you to view them in a new tab): https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/abrZQJO https://codepen.io/GreenSock/pen/eYQYxJW https://codepen.io/GreenSock/pen/wvYVjvb Hopefully this helps. Happy Tweening!

Hi, It's a shame that Astro works like that, but is great that you manage to solve it! 🥳 Finally thanks for sharing your solution with the community, I'm sure your generosity will help many users in the community 💚 Happy Tweening!

Hi, Yeah that's just the way things work in browsers. You have two options, use a very small src for the image with a fix width/height and then load the large image: https://codepen.io/GreenSock/pen/OJMaEOP The other option, similar to that demo is to track the loading state of each image and when a new image is loaded, call ScrollTrigger.refresh() in order to update the ScrollTrigger instances based on the new height. For this approach you can use this simple but useful tool: https://imagesloaded.desandro.com/ Hopefully this helps. Happy Tweening!

Hi, I'm not sure if this is the simplest thing to do, SVG is not something I really excel at, but this would be my starting approach using MorphSVG and MotionPath: https://codepen.io/GreenSock/pen/XWwjjmK You'll have to find a way to rotate the end appropriately of course, but hopefully this helps getting you started. Happy Tweening!

Hi, Normally my brain works better with loops, especially if you need the first element to be visible: https://codepen.io/GreenSock/pen/BaeLzjm Happy Tweening!

Hi, GSAP is 100% framework agnostic, so it should work in any setup you have. What things you can check: Make sure that you're adding your scripts in the right order, that means you should add the GSAP core file first, then the plugins and finally your custom JS file: https://gsap.com/docs/v3/Installation?tab=cdn&module=esm&method=private+registry&tier=club&club=true&require=false&trial=true&club-plugins=DrawSVGPlugin Just in case register your plugin: gsap.registerPlugin(DrawSVGPlugin) Check your console on devtools to see if you're getting any GSAP related warnings or errors. Hopefully this helps Happy Tweening!

Be sure to check our Youtube channel as well: https://www.youtube.com/@GreenSockLearning/videos

Our docs are always the first place you should look into when you have any doubt, question or you're not sure how something can be achieved: https://gsap.com/docs/v3/GSAP/ Not only we have a comprehensive explanation of GSAP's API there, but also you'll find the Learning Center link as well and a link to a large collection of how-to demos and starter templates: https://gsap.com/demos?page=1 Happy Tweening!

There are lots of tutorials out there on the web and youtube, that will cover some specific effects and tricks with GSAP, so you should start by looking on google. You should definitely check our Learning Center: https://gsap.com/resources/ Also check our starter demos on codepen: https://gsap.com/demos/?page=1 While you go through those demos be sure to have the documents at hand in order to check the API: https://gsap.com/docs/v3/GSAP/ Finally @Carl offers great learning resources in his courses and he is a great teacher as well, so is definitely worth taking a look at it: https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484 Happy Tweening!

Hi, I'm not 100% sure I fully understand what's going on here and unfortunately I don't have a lot of time to dig into this and try to create a demo of my approach. I forked Mitchel's great demo and added this little bit to it: // Function to setup ScrollTrigger let st; function setupScrollTrigger() { const { navWidth, containerWidth, navbarHeight } = calculateDimensions(); // Get dimensions st && st.kill(); // Create a ScrollTrigger instance st = ScrollTrigger.create({ trigger: searchContainer, start: `top top+=${navbarHeight}`, end: `bottom top`, pin: searchContainer, pinSpacing: false, scrub: true, // There is no animation connected to ScrollTrigger, so this does noething onLeave: () => {...}, onLeaveBack: () => {...} }); } And it seems to be working as expected: https://codepen.io/GreenSock/pen/BaezENM Hopefully this helps. Happy Tweening!

Hi @chubi-x and welcome to the GSAP Forums! The reason is very simple and it comes with some extra advice: As you can see in the image, the start position of the ScrollTrigger configuration has already been passed, so the animation is already being scrubbed, that's why the clamp functionality was added (expand the View More details link and scroll a bit to see how it works. Also there is a video where @Cassie goes into a lot of detail on the subject): https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start Also you're adding ScrollTrigger configs to Tweens that are nested in a Timeline. That creates a logical issue as explained here: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Here is a fork of your codepen: https://codepen.io/GreenSock/pen/dyEXLbZ Hopefully this helps. Happy Tweening!

You're welcome! Nice profile image, by the way!! 🐶

Hi, Maybe something like this (better in full screen view probably): https://codepen.io/GreenSock/pen/abrZQJO Happy Tweening!

Hi, One of the containers that is not the width and height of the viewport has overflow hidden so that creates a crop that looks odd. Also you have to add perspective to a container in order to create a 3D effect: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective I updated the codepen: https://codepen.io/GreenSock/pen/KKLMGMv Hopefully this helps. Happy Tweening!